<template>
  <div>
    <!--    home-->

    <!--<input type="file ">-->

    <div class="box">
      盒子模型180
    </div>
    <div class="el-text">右边的东海县</div>
    <div class="ie-box">
      IE盒子模型180
    </div>
    <my-line></my-line>



  </div>
</template>

<script>
import MyLine from "@/components/myLine.vue";

export default {
  name: "home",
  components: {MyLine}
}
</script>

<style scoped>
section {
  font-size: 20px;
  top: -10px;
  right: 0;
  position: absolute;
}

.ie-box {
  box-sizing: border-box;
  width: 180px;
  height: 100px;
  padding: 10px;
  border: 3px solid black;
  margin: 10px 0px 0px 10px;
  transition: width, background ease 0.25s, 1.0s;
}

.box {
  box-sizing: border-box;
  width: 180px;
  height: 100px;
  padding: 10px;
  border: 3px solid black;
  margin: 10px 0px 0px 10px;
  transition: width, background ease 0.25s, 1.0s;
  /*transition-property: width, background;*/
  /*transition-duration: .25s, 1s;*/
  /*transition-delay: 0;*/
  /*transition-timing-function: ease;*/
}

.box:hover {
  width: 200px;
  background-color: blue;
  color: red;

}

.el-text {
  color: red;
  display: none;
}

.box:hover + .el-text {
  display: block;
}
</style>